---
title: Получение данных
description: Узнайте, как получать удаленные данные с помощью Astro, используя API fetch.
i18nReady: true
---

Файлы `.astro` могут получать удаленные данные, чтобы помочь вам генерировать страницы.

## `fetch()` в Astro

Все [компоненты Astro](/ru/basics/astro-components/) имеют доступ к [глобальной функции `fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) в скрипте своего компонента для выполнения HTTP-запросов к API с использованием полного URL (например, https://example.com/api или `Astro.url + "/api"`).

Этот запрос fetch будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML. Если включен режим [SSR](/ru/guides/server-side-rendering/), любые запросы fetch будут выполняться во время выполнения.

💡 Воспользуйтесь преимуществом [**await верхнего уровня**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) внутри скрипта вашего Astro компонента.

💡 Передавайте полученные данные как компонентам Astro, так и компонентам фреймворка в виде пропсов.

```astro /await fetch\\(.*?\\)/
---
// src/components/User.astro
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Данные, полученные при сборке, могут быть отображены в HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Данные, полученные при сборке, могут быть переданы компонентам как пропсы -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
```

:::note
Помните, что Astro компоненты получают данные когда они рендерятся.

Ваш развернутый сайт Astro будет получать данные **один раз, во время сборки**. Во время разработки вы увидите запросы данных при обновлении компонента. Если вам нужно обновлять данные несколько раз на стороне клиента, используйте [компоненты фреймворка](/ru/guides/framework-components/) или [клиентские скрипты](/ru/guides/client-side-scripts/) в компоненте Astro.
:::


## `fetch()` в компонентах фреймворка

Функция `fetch()` также глобально доступна для любого [компонента фреймворка](/ru/guides/framework-components/):

```tsx title="src/components/Movies.tsx" /await fetch\\(.*?\\)/
import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) =>
  response.json()
);

// Компоненты, которые рендерятся во время сборки, также регистрируются в CLI.
// При рендеринге с помощью директивы client:* они также выводятся в консоль браузера.
console.log(data);

const Movies: FunctionalComponent = () => {
// Вывод результата на страницу
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;
```


## Запросы на GraphQL

Astro также может использовать `fetch()` для запроса к GraphQL-серверу с любым корректным GraphQL-запросом.

```astro title="src/components/Film.astro" "await fetch"
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await response.json();
const { film } = json.data;
---
<h1>Fetching information about Star Wars: A New Hope</h1>
<h2>Title: {film.title}</h2>
<p>Year: {film.releaseDate}</p>
```

## Получение данных из безголовой CMS

Компоненты Astro могут получать данные из вашей любимой CMS и затем отображать их в качестве содержимого страницы. Используя [динамические маршруты](/ru/guides/routing/#динамические-маршруты), компоненты могут даже генерировать страницы на основе содержимого вашей CMS.

Посмотрите наши [Руководства по CMS](/ru/guides/cms/) для получения подробной информации об интеграции Astro с безголовыми CMS, включая Storyblok, Contentful и WordPress.

## Ресурсы сообщества

- [Создание фуллстек приложения с помощью Astro + GraphQL](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)